<template>
  <div class="toast-wrapper" v-show="isToasting">
    <!-- <div class="toast-mask"></div> -->
    <div
      class="toast-box"
      :class="{ icon0: toast.icon == 0, icon1: toast.icon == 1, icon2: toast.icon == 2, showing: isToasting }"
    >
      <i class="glyphicon"></i>
      <span>{{ toast.info }}</span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      isToasting: 'getIsToasting',
      toast: 'getToast'
    })
  }
};
</script>

<style lang="less" scoped>
@import '../../assets/less/base/variables.less';
@import '../../assets/less/mixins/opacity.less';
.toast-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 3000;
}
.toast-box {
  position: absolute;
  // margin-top: -20px;
  padding: 10px 24px;
  color: @white;
  box-shadow: 2px 3px 6px @grey99;
  border-radius: 4px;
  display: flex;
  align-items: center;
  .opacity(0.9);
  animation: boostOut 0.2s ease;
  // z-index: 1000;
  &.showing {
    animation: boostIn 0.2s ease;
  }
  > .glyphicon {
    display: inline-block;
    margin-right: 10px;
    width: 24px;
    height: 24px;
    vertical-align: bottom;
    background: url(../../assets/img/ake-icon.png) no-repeat center center;
    // background-position: 0 0;
    position: relative;
  }
  &.icon0 {
    background-color: @blue;
    > .glyphicon {
      width: 0;
      height: 0;
      background: none;
    }
  }
  &.icon1 {
    background-color: @green;
    > .glyphicon {
      background-position: -164px 0px;
    }
  }
  &.icon2 {
    background-color: @red;
    > .glyphicon {
      background-position: -190px 0px;
    }
  }
  > span {
    display: inline-block;
    font-size: 16px;
    letter-spacing: 1px;
    max-width: 240px;
  }
}

@-webkit-keyframes boostIn {
  /* 默认 */
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes boostIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes boostOut {
  /* 默认 */
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
@keyframes boostOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
</style>
